<script setup lang="ts">
import { CopyOutlined } from '@ant-design/icons-vue';

import { copyToClipboard } from '#/utils';

defineProps<{
  content?: string;
  title?: string;
}>();
const $emit = defineEmits(['clickContent']);
</script>

<template>
  <a-space>
    <div class="text-xs">{{ title }}</div>
    <div
      class="cursor-pointer text-xs text-gray-500"
      @click="$emit('clickContent')"
    >
      {{ content }}
    </div>
    <a-button
      shape="round"
      size="small"
      type="link"
      @click="
        () => {
          copyToClipboard(content);
        }
      "
    >
      <template #icon>
        <CopyOutlined class="text-xs" />
      </template>
    </a-button>
  </a-space>
</template>
